<!--  -->
<template>
    <div class="login-account">
        <el-form label-width="60px" :rules="rules" :model="account" ref="formRef">
            <el-form-item label="账号" prop="name">
                <el-input v-model="account.name"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="account.password"></el-input>
            </el-form-item>
        </el-form>
    </div>
</template>

<script lang="ts">
    import {
        defineComponent,
        ref,
        reactive
    } from "vue";
    import {
        ElForm
    } from 'element-plus'
    import {
        rules
    } from '../config/account-config'

    export default defineComponent({
        name: "Login",
        setup() {
            const account = reactive({
                name: '',
                password: ''
            })
            const formRef = ref < InstanceType < typeof ElForm >> ()
            const loginAction = (isKeepPassword: boolean) => {
                formRef.value.validate((valid) => {
                    if (valid) {
                        //判断是否记住密码
                        if (isKeepPassword) {
                            localStorage.getItem('name', account.name)
                            localStorage.getItem('password', account.password)
                        } else {
                            localStorage.clear()
                        }
                    }
                })
            }

            return {
                account,
                rules,


            }
        }
    });
</script>
<style lang="less">

</style>